<!-- 组件名: index -->
<!-- 创建日期: 2023/12/30 -->
<!-- 编写者: Adil -->

<template>
  <div class="articles">
    <div class="site-content animate">
      <main class="site-main">
        <article class="hentry grid-line">
          <el-row>
            <el-col :span="24">
              <header class="entry-header">
                <!-- 标题输出 -->
                <h1 class="entry-title">{{ title }}</h1>
                <hr>
                <div class="breadcrumbs">
                  <div id="crumbs">最后更新时间：{{ formatTime(times) }}</div>
                </div>
              </header>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <div v-for="(item, index) in PreviewData" style="margin-top: 50px">
                <el-tag>{{index + 1}}</el-tag>
                <span class="Item_url_btn">
                  Url:
                  <el-tag type="danger" @click="copy()" class="copy-button">
                    <span id="Copy">{{ item.url }}</span>
                  </el-tag>
                </span>
                <span class="Item_version">
                  版本号：
                  <span>{{ item.version }}</span>
                </span>
                <el-divider></el-divider>
                <el-descriptions title="1: 功能说明" border :column="2" style="margin-top: 30px">
                  <el-descriptions-item label="接口名">{{ item.interfaceName }}</el-descriptions-item>
                  <el-descriptions-item label="版本号">{{ item.version }}</el-descriptions-item>
                  <el-descriptions-item label="请求方式">{{ item.method }}</el-descriptions-item>
                  <el-descriptions-item label="返回contentType类型">{{ item.contentType }}</el-descriptions-item>
                </el-descriptions>
                <!-- 正文输出 -->
                <div style="margin-top: 20px">
                  <label>2: 接口说明</label>
                  <mk-md-editor class="md-edit" mode="preview" v-model="item.remark" />
                </div>

                <div style="margin-top: 20px" v-show="item.headers.length > 0">
                  <label>3: 请求头说明</label>
                  <el-table :data="item.headers" border style="margin-top: 20px">
                    <el-table-column label="名称" align="center" key="name" prop="name" />
                    <el-table-column label="必填" align="center" key="necessary" prop="necessary">
                      <template #default="scope">
                        <span>{{ scope.row.necessary === '1' ? '是':'否' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="类型" align="center" key="type" prop="type" />
                    <el-table-column label="默认值" align="center" key="realName" prop="realName" />
                    <el-table-column label="备注" align="center" key="remark" prop="remark" />
                  </el-table>
                </div>

                <div style="margin-top: 20px" v-show="item.req.length > 0">
                  <label>4: 请求参数说明</label>
                  <el-table :data="item.req" border style="margin-top: 20px">
                    <el-table-column label="名称" align="center" key="name" prop="name" />
                    <el-table-column label="必填" align="center" key="necessary" prop="necessary">
                      <template #default="scope">
                        <span>{{ scope.row.necessary === '1' ? '是':'否' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="位置" align="center" key="paramPosition" prop="paramPosition" />
                    <el-table-column label="类型" align="center" key="type" prop="type" />
                    <el-table-column label="默认值" align="center" key="realName" prop="realName" />
                    <el-table-column label="备注" align="center" key="remark" prop="remark" />
                  </el-table>
                </div>

                <div style="margin-top: 20px" v-show="item.res.length > 0">
                  <label>5: 返回参数说明</label>
                  <el-table :data="item.res" border style="margin-top: 20px">
                    <el-table-column label="名称" align="center" key="name" prop="name" />
                    <el-table-column label="必填" align="center" key="necessary" prop="necessary">
                      <template #default="scope">
                        <span>{{ scope.row.necessary === '1' ? '是':'否' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="类型" align="center" key="type" prop="type" />
                    <el-table-column label="备注" align="center" key="remark" prop="remark" />
                  </el-table>
                </div>
                <el-divider></el-divider>
              </div>
              <div style="margin-top: 20px">
                <label>6: 状态码</label>
                <el-table :data="Status" border style="margin-top: 20px">
                  <el-table-column label="Code" align="center" key="errorCode" prop="errorCode" />
                  <el-table-column label="Msg" align="center" key="errorMsg" prop="errorMsg" />
                </el-table>
              </div>
            </el-col>
          </el-row>
        </article>
      </main>
    </div>

    <el-backtop :visibility-height="200"></el-backtop>
  </div>
</template>

<script>
import SectionTitle from "@/components/Section/section-title.vue";
import { GetConnectorPreview} from "@/api/connector";
import {formatTime} from "../../../utils/adil";
import MkMdEditor from "@/components/md-editor/index.vue";
import Clipboard from 'clipboard';

export default {
  name: "index",
  components: {MkMdEditor, SectionTitle},
  data() {
    return {
      PreviewData: null,
      Status: null,
      title: '',
      times: ''
    };
  },
  // 计算属性
  computed: {},
  mounted() {
    this.getList()
  },
  methods: {
    formatTime,
    getList() {
      GetConnectorPreview(this.$route.params.id).then(res => {
        this.PreviewData = res.result
        this.Status = res.Status
        this.title = res.result[0].projectName
        this.times = res.result[0].createTimeStr
        console.log(res)
      })
    },

    copy() {
      const clipboard = new Clipboard('#Copy');
      clipboard.on('success', () => {
        console.log('res')
      });
      clipboard.on('error', () => {
        console.log('复制失败！');
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.articles {
  /* header = 80px */
  min-height: -moz-calc(100vh - 80px);
  min-height: -webkit-calc(100vh - 80px);
  min-height: calc(100vh - 80px);
  max-width: 1200px;
  /*使也页面滚动更顺滑*/
  scroll-behavior: smooth;
  margin: auto;

  background-image: linear-gradient(90deg,
      rgba(196, 198, 198, 0.15) 10%,
      rgba(0, 0, 0, 0) 10%),
  linear-gradient(rgba(205, 205, 205, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 10px 10px;
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid rgba(232, 232, 232, 0.15);
}
.site-content {
  position: relative;

  .site-main {
    padding: 80px 0 0 0;
  }
}
article.hentry {
  .entry-header {
    .entry-title {
      font-size: 23px;
      font-weight: 600;
      color: #737373;
      margin: 0.67em 0;

      &:before {
        content: "#";
        margin-right: 6px;
        color: #d82e16;
        font-size: 20px;
        font-weight: 600;
      }
    }
    hr {
      height: 1px;
      border: 0;
      background: #EFEFEF;
      margin: 15px 0;
    }

    .breadcrumbs {
      font-size: 14px;
      color: #D2D2D2;
      text-decoration: none;
      margin-bottom: 30px;
    }
  }
  .tags-box {
    display: flex;
    margin-top: 8px;
    font-size: 13px;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }

  .tag-item {
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 5px;
    margin: 0 5px;
  }

  .entry-content {

  }

  footer.post-footer {
    width: 100%;
    padding: 20px 10px;
    margin-top: 30px;
    height: 65px;
    position: relative;

    i {
      font-size: 18px;
      margin-right: 5px;
    }

    .post-like {
      float: right;
      margin: 7px 0 0 20px;
    }

    .post-share {
      float: right;
      list-style: none;
      margin-right: 20px;
    }

    .donate {
      float: left;
      line-height: 36px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border: 1px solid #2B2B2B;

      &:hover {
        border: 1px solid goldenrod;

        span {
          color: goldenrod;
        }
      }

      span {
        color: #2B2B2B;
        padding: 10px;
        position: relative;
        cursor: pointer;
      }

      .donate_inner {
        display: none;
        margin: 0;
        list-style: none;
        position: absolute;
        left: 80px;
        top: -40px;
        background: #FFF;
        padding: 10px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
        border-radius: 3px;

        &.show {
          display: block;
        }

        li {
          float: left;
        }

        img {
          width: 100px;
        }

        p {
          text-align: center;
          font-size: 15px;
          color: #D2D2D2;
          line-height: 1rem;
        }
      }

      .donate_inner:after, .donate_inner:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 45%;
        margin-left: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
      }

      .donate_inner:before {
        left: -1px;
        border-right: 8px solid #ddd;
      }

    }

    .post-tags {
      margin: 7px 0 0 20px;
      float: left;
      text-transform: uppercase;

      a:hover {
        color: #ff6d6d;
      }
    }
  }

  .open-message {
    margin: 50px 0;
    position: relative;
    background: #2B2B2B;
    padding: 10px 30px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;

    &:after {
      content: "";
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #2B2B2B;
      position: absolute;
      top: -8px;
      left: 48%;
    }

    p {
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    a {
      color: #A0DAD0;
      padding: 0 5px;
    }
  }
}
.comments-head {
  border-top: 1px dashed #ECECEC;
  padding: 15px 0;
  padding-left: 10px;
  margin-bottom: 25px;

  .comments-h-t {
    line-height: 40px;
    padding-bottom: 10px;
    font-size: 15px;

  }
}

.Item_url_btn {
  color: #000;
  margin-left: 20px;
  font-size: 14px;
  font-weight: bolder;

  button {
    color: #ffffff;
    background-color: #ff4530;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

.Item_version {
  float: right;
  color: #000;
  font-size: 14px;
  font-weight: bolder;
}
</style>
